import "./index.scss";
import reactIcon from "@/assets/react.svg";

import { Button, Checkbox, Form, Input, message } from 'antd';
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";

// import 'antd/dist/antd.css';

const styles = {
    login: {
        background: `linear-gradient(blue, pink)`,
        width: "100vw",
        height: "100vh",
    }
};
interface loginData {
    username: string;
    password: string;
    remember: string;
}

function Login() {
    const navigate = useNavigate();
    const [messageApi, contextHolder] = message.useMessage();

    const onFinish = (values: loginData) => {
        messageApi.open({
            type: 'loading',
            content: '正在登录..',
            duration: 0,
        });

        setTimeout(() => {
            messageApi.destroy();
            //默认请求延时
            if (values.username == "admin" && values.password == "123") {
                localStorage.setItem("token","ddasdadadas123");
                messageApi.open({
                    type: 'success',
                    content: '登录成功!',
                    onClose() {
                        navigate("/layout/home");
                    }
                });
                return;
            } else {
                messageApi.open({
                    type: 'error',
                    content: '登录失败!',
                });
            }
        }, 500);
    };

    const onFinishFailed = (errorInfo: any) => {
        // console.log('Failed:', errorInfo);
    };
    return (
        <div className="login_container" style={styles.login}>
            {contextHolder}
            <div className="title_big" >Ant Design后台管理系统 <img src={reactIcon} style={{ marginLeft: "5px" }} /></div>
            <div className="login_panel">
                <Form
                    name="basic"
                    labelCol={{ span: 0 }}
                    wrapperCol={{ span: 24 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        name="username"
                        rules={[
                            { required: true, message: '请输入用户名!' },
                            ({ getFieldValue }) => ({
                                validator(_, value) {
                                    if (value === "admin") {
                                        return Promise.resolve();
                                    }
                                    return Promise.reject(new Error('用户名不存在!'));
                                },
                            }),
                        ]}
                    >
                        <Input prefix={<UserOutlined />} placeholder="用户名" autoComplete="off" />
                    </Form.Item>

                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '请输入密码!' }]}
                    >
                        <Input.Password prefix={<LockOutlined />}  placeholder="密码" />
                    </Form.Item>

                    <Form.Item wrapperCol={{ span: 24 }} name="remember" valuePropName="checked">
                        <Checkbox>记住密码</Checkbox>
                        {/* <Button type="link" htmlType="button" style={{ float: "right" }}>
                            忘记密码？
                        </Button> */}
                    </Form.Item>

                    <Form.Item wrapperCol={{ span: 24 }}>
                        <Button type="primary" htmlType="submit" block>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default Login;